<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<style>
.form-group{
	margin-bottom: 0;
}
</style>
<head th:include="include/head">

</head>

<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">


		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>流程设置</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">首页</a></li>
								<li class="breadcrumb-item active">流程设置</li>
							</ol>
						</div>
					</div>
				</div>
				<!-- /.container-fluid -->
			</section>
			<section class="content">
					<form id="fileupload" th:action="@{/common/upload}" method="post"
						style="display: none;">
						<input type="hidden"  id="type" />
						<input type="file" name="file" id="file" />
					</form>
					<form class="form-horizontal" id="form" method="post"
						enctype="multipart/form-data" th:action="@{/process/save}">
						
				<div class="card card-info">
					
					<div class="card-header">
						<h3 class="card-title">基本信息</h3>
					</div>
		
			
						<input type="hidden" name="processId" id="processId" th:value="${bean.processId}" />
						<div class="card-body">
							<div class="form-group row">
								<label for="processName" class="col-sm-2 col-form-label">名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="processName" required="required"
										   id="processName" aria-required="true" th:value="${bean.processName}">
									<label class="help-block m-b-none" for="processName"
										   id="processName-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="baseId" class="col-sm-2 col-form-label">所属部门</label>
								<div class="col-sm-10">
									<select  class="form-control"   id="baseId" name="baseId"  required>
										<option value="">选择部门</option>
										<option  th:each="model : ${baseList}" th:value="${model.baseId}"
												 th:text="${model.baseName}" th:selected="${model.baseId}==${bean.baseId}" value="0">否</option>

									</select>
									<input   type="hidden"  name="baseName"  id="baseName" th:value="${bean.baseName}">
									<label class="help-block m-b-none" for="baseId"
										   id="baseId-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="processState" class="col-sm-2 col-form-label">状态</label>
								<div class="col-sm-10">
									<input type="checkbox" class="js-switch" id="state3"  th:checked="${bean.processState}==1"  />
									<input type="hidden" id="processState" name="processState" th:value="${bean.processState}">
								</div>
							</div>
							<div class="form-group row">
								<label for="baseId" class="col-sm-2 col-form-label">流程设置</label>

							</div>
						</div>
					<div class="card-body"  id="content"  style="padding-top: 0">
						<div class="form-group row"   th:each=" data,dataindex:${pdataList}" >
							<label for="processName" class="col-sm-2 col-form-label">第[[${dataindex.index+1}]]步</label>
							<div class="col-sm-8">
								<select  class="form-control"   th:id="'dId'+${dataindex.index+1}" name="dId"   onchange="changeData(this)"   required>
									<option value="">请选择</option>
									<option  th:each="model : ${dataList}" th:value="${model.dataId}"
											 th:text="${model.dataName}"  th:selected="${model.dataId}==${data.dataId}"></option>
								</select>
								<input   type="hidden"   th:id="'namedId'+${dataindex.index+1}" name="dName" th:value="${data.dataName}">
								<label class="help-block m-b-none" th:for="dId+${dataindex.index+1}"
									   th:id="'dId'+${dataindex.index+1}+'-error'"><i class="far fa-bell"></i>必填项</label>

							</div>
							<div class="col-sm-1">
								<i class="fas fa-plus"></i>
								<i class=" fas fa-minus" style="margin-left: 20px;"></i>
							</div>
						</div>
						<div class="form-group row"  th:if="${#lists.isEmpty(pdataList)}"   >
							<label for="processName" class="col-sm-2 col-form-label">第1步</label>
							<div class="col-sm-8">
								<select  class="form-control"   id="dId1" name="dId"   onchange="changeData(this)"  required>
									<option value="">请选择</option>

								</select>
								<input   type="hidden"   id="namedId1" name="dName">
								<label class="help-block m-b-none" for="dId1"
									   id="dId-error"><i class="far fa-bell"></i>必填项</label>

							</div>
							<div class="col-sm-1">
								<i class="fas fa-plus"></i>
								<i class=" fas fa-minus" style="margin-left: 20px;"></i>
							</div>
						</div>
					</div>
				</div>
				
					
				</form>
				<!-- /.card-body -->
				<div class="card-footer">
					<button type="button" class="btn btn-info" onclick="validaBef();">保存</button>
					<button type="button" class="btn btn-default float-right" id="back">取消</button>
				</div>
				<!-- /.card-footer -->
				

		</section>
		</div>
	</div>
	<!-- ./wrapper -->
	<div th:include="include/foot"></div>

	<script>
		var issubmit=false;
		function dosubmit(){
			if(issubmit==false){
				issubmit=true;
				return true;
			}else{
				return false;
			}
		}
		function  changeData(obj){
			let  v=$('#'+obj.id+' option:selected').text()
			console.log(v)
			$('#name'+obj.id).val(v)
		}
	$(document).on("click",".fa-plus",function() {
		let   baseId= $('#baseId  option:selected').val()
		var  cno=$("select[name='dId']").length+1;
		console.log(cno)
		if(baseId){
			$.ajax({
				type: 'POST',
				url: "../process/getdata?id=" + baseId,
				success: function(result){
					console.log(result)
					let  newcontent='<div class="form-group row"  >'+
							'<label for="processName" class="col-sm-2 col-form-label">第'+cno+'步</label>\n' +
							'\t\t\t\t\t\t\t\t<div class="col-sm-8">\n' +
							'\t\t\t\t\t\t\t\t\t<select  class="form-control"   id="dId'+cno+'" name="dId"    onchange="changeData(this)" required>\n' +
							'\t\t\t\t\t\t\t\t\t\t<option value="">请选择</option>\n' +
							result+
							'\t\t\t\t\t\t\t\t\t</select>\n' +
							'<input   type="hidden"   id="namedId'+cno+'" name="dName">'+
							'\t\t\t\t\t\t\t\t\t<label class="help-block m-b-none" for="dId'+cno+'"\n' +
							'\t\t\t\t\t\t\t\t\t\t   id="dId'+cno+'-error"><i class="far fa-bell"></i>必填项</label>\n' +
							'\n' +
							'\t\t\t\t\t\t\t\t</div>\n' +
							'\t\t\t\t\t\t\t\t<div class="col-sm-1">\n' +
							'\t\t\t\t\t\t\t\t\t<i class="fas fa-plus"></i>\n' +
							'\t\t\t\t\t\t\t\t\t<i class=" fas fa-minus" style="margin-left: 20px;"></i>\n' +
							'\t\t\t\t\t\t\t\t</div>'+
							'\t\t\t\t\t\t\t\t</div>'

					$('#content').append(newcontent)
				}
			});




		}else {
			layer.alert("请选择部门")
		}



	});
	$(document).on("click",".fa-minus",function() {
		var  cno=$("select[name='dId']").length;
		console.log(cno)
		if(cno>1){
			$(this).parent().parent().remove();
		}else {

		}



	});
	$("#addex").click(function(){
		let  id=$('#id').val();
		console.log(id)
		// return;
		layer.open({
	        type: 2, 
//		        closeBtn:0,
	        title: false, 
	        area: ['50%', '95%'],
	        content: 'select_experts?id='+id,
	      });
    });
	$("#addPic").click(function(){
		$("#file").click();
	});
	$("#back").click(function() {
		location.href = 'list';
	});
	$("#file").change(function(e){
		if($(this).val()!=''){
			$("#fileupload").ajaxSubmit({
				success:function(e){
					console.log(e);
					if(e.res){
						$('.filediv').each(function(i,e){
							if(i>0){
								$(e).remove();
							}
						});
						let filediv= $(".filediv:eq(0)");
						let filedivclone=filediv.clone(true);
						filedivclone.find('img').attr('src',e.url);
						filedivclone.find('input').attr('name','picUrl');
						filedivclone.find('input').attr('value',e.url);
						filedivclone.show();
						filedivclone.appendTo(filediv.parent());
						$("#file").val("")
					}
					
				},error:function(e){
					layer.msg(e.responseText, {icon: 5});
				}
			});
		}
		
	});
// 	var elem = document.querySelector('.js-switch');
// 	var switchery = new Switchery(elem, { color: '#1AB394' });
	var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
	elems.forEach(function(html) {
	  var switchery = new Switchery(html, { color: '#1AB394' });
	});
	
		$.validator.setDefaults({
			ignore: "",
			highlight : function(a) {
				$(a).removeClass("is-valid").addClass("is-invalid");
			},
			success : function(a) {
				$(a).prev().removeClass("is-invalid").addClass("is-valid");
				$(a).html('<i class="fas fa-check"></i>验证成功');
			},
			errorClass : "help-block m-b-none",
// 			validClass : "help-block m-b-none",
			errorPlacement : function(a, b) {
				if (b.is(":radio") || b.is(":checkbox")) {
					a.appendTo(b.parent().parent().parent())
				} else {
					a.appendTo(b.parent())
				}
			},
			submitHandler:function(form){
				$(form).find(":submit").attr("disabled", true).attr("value","Submitting...");
				form.submit();
			}
		});
	if ($.validator) {
		//fix: when several input elements shares the same name, but has different id-ies....
		$.validator.prototype.elements = function () {
			var validator = this,
					rulesCache = {};
			// select all valid inputs inside the form (no submit or reset buttons)
			// workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
			return $([]).add(this.currentForm.elements)
					.filter(":input")
					.not(":submit, :reset, :image, [disabled]")
					.not(this.settings.ignore)
					.filter(function () {
						var elementIdentification = this.id || this.name;
						!elementIdentification && validator.settings.debug && window.console && console.error("%o has no id nor name assigned", this);
						// select only the first element for each name, and only those with rules specified
						if (elementIdentification in rulesCache || !validator.objectLength($(this).rules()))
							return false;
						rulesCache[elementIdentification] = true;
						return true;
					});
		};
	}
		$.validator.addMethod("checkFile",function(value,element){
			let files=$("input[name='fileurls']");
			if(files.length==0){
				return true;
			}
			return false;
		},"");
		$.validator.addMethod("mobile", function(value, element) {
			var myreg=/^[1][3,4,5,6.7,8,9][0-9]{9}$/;
			var length = value.length;
			return this.optional(element) || (length == 11 && myreg.test(value));
		}, "手机号码格式错误!");
		$("#form").validate(
				{
					ignore : "",
					rules : {
					goodsName : "required",
					doctorPhone: {
						required:true,
						mobile:true
					},
					filehidden : {
							required:true
					},
					attrs : {
							required:true
					},

				},
				messages : {
					goodsName : '<i class="far fa-times-circle"></i>请输入商品名称',
					filehidden : '<i class="far fa-times-circle"></i>请上传图片',
					attrs : '<i class="far fa-times-circle"></i>请选择关联专家',
				}
			});
		function validaBef(){
			

			if($("#state3").prop("checked")){
				$("#processState").val("1");
			}else{
				$("#processState").val("0");
			}
			let code=$('.textarea').summernote('code');
			$(".textarea").val(code);
			$("#checkItems").val($('.specsItem:checked').map(function(){return this.value}).get().join(','));
			let file=$("input[name='picUrl']").map(function(){return this.value}).get().join(',');
			$("#filehidden").attr('value',file);
			if ($("input[name='eId']").length>0){
				$("#attrs").attr('value',$("input[name='eId']").length);
			}


			if($("#form").validate()){
				if(dosubmit()){
					$("#form").submit();
				}
				setTimeout(function () {
					issubmit=false
				}, 3000);
			}
			
		}
		$(document).ready(function (){
			$("#baseId").change(function (){

				let v=$(this).val();
				let t= $(this).find("option:selected").text();
				if(v>0){
				console.log($("select[name='dId']").length)

					$("#baseName").val(t);
					$.ajax({url:'../process/dataList',data:"baseId="+v,success:function (data){
							console.log(data)
							if(data.res){
								$("select[name='dId']").each(function (index, item) {

									$("#dId"+(index+1)).empty();
									$("#dId"+(index+1)).append("<option value=''>请选择</option>");
									for(let i=0;i<data.list.length;i++){
										// console.log(data.list[i])
										$("#dId"+(index+1)).append("<option value='"+data.list[i].dataId+"'>"+data.list[i].dataName+"</option>");
									}

								});


							}
						}})
				}


			});
			$("#departmentId").change(function (){
				let v=$(this).val();
				let t= $(this).find("option:selected").text();
				console.log(v,t)
				if(v>0){
					$("#departmentName").val(t);
				}
			
			});
			$("#doctorTitlesId").change(function (){
				let v=$(this).val();
				let t= $(this).find("option:selected").text();
				if(v>0){
					$("#doctorTitlesName").val(t);
				}
			});

		});


	</script>
</body>
</html>